<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>教学秘书首页</title>
    <link rel="icon" href="../img/logo.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../bootstrap-4.6.2-dist_and_jQuery/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap-4.6.2-dist_and_jQuery/css/style.css">
    <script src="../bootstrap-4.6.2-dist_and_jQuery/js/jquery-3.7.0.js"></script>
    <script src="../bootstrap-4.6.2-dist_and_jQuery/js/bootstrap.js"></script>
</head>

<body>
    <div class="header">
        <div style="display: flex; align-items: center; margin-right: auto;">
            <img src="../img/logo2.png" alt="图片加载失败">
            <h2>教务管理系统</h2>
        </div>

        <div class="option">
            <a href="教学秘书首页.html" class="daohang">课程安排</a>
            <!-- 录入课程，分配课程，分配教室 -->
        </div>
        <div class="option">
            <a href="教秘查看选课.html" class="daohang">查看选课</a>
            <!-- 查看特定老师或学生的课程，班级，年级，专业和成绩 -->
        </div>
        <div class="option">
            <a href="教秘审批申请.html" class="daohang">申请审批</a>
        </div>
        <img src="../img/message.png" alt="图片加载失败" style="padding: 5px;" id="message-img">
    </div>
    <div class="container">
        <div style=" margin-bottom: 50px;">
            <div style="display: flex;">
                <input id="search" class="search-course" type="text" placeholder=" 请输入想选课程">
                <button class="search-button" onclick="search()">搜索</button>
            </div>
        </div>

        <table class="table">
            <thead>
                <tr>
                    <th>课程名称</th>
                    <th>课程专业</th>
                    <th>课程学院</th>
                    <th>课程老师</th>
                    <th>课程教室</th>
                    <th>课程时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="course">

            </tbody>
        </table>
        <div style="display: flex; justify-content: center;">
            <p id="current_page"></p>
            <p style="margin-right: auto;" id="total_page"></p>
            <button class="btn btn-primary" style="margin-right: 20px;" data-toggle="modal" data-target="#addCourseModal">录入课程</button>
            <button class="btn btn-primary" style="margin-right: 20px;" onclick="prepage()">上一页</button>
            <button class="btn btn-primary" onclick="nextpage()">下一页</button>
        </div>
    </div>
    <div class="footer">
        教务管理系统 2023 from 摆烂小组
    </div>
    <!-- 录入课程 -->
    <div class="modal fade" id="addCourseModal" tabindex="-1" role="dialog" aria-labelledby="addCourseModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="addCourseModalLabel">录入课程</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <!-- 表单 -->
                    <form id="addCourseForm">
                        <div class="form-group">
                            <label for="courseName">课程名称</label>
                            <input type="text" class="form-control" id="courseName" name="courseName" required>
                        </div>
                        <div class="form-group">
                            <label for="coursemajor">课程专业</label>
                            <input type="text" class="form-control" id="coursemajor" name="coursemajor" required>
                        </div>
                        <div class="form-group">
                            <label for="courseschool">课程学院</label>
                            <input type="text" class="form-control" id="courseschool" name="courseschool" required>
                        </div>
                        <div class="form-group">
                            <label for="courseTeacher">任课教师</label>
                            <input type="text" class="form-control" id="courseTeacher" name="courseTeacher" required>
                        </div>
                        <div class="form-group">
                            <label for="courseclassroom">课程教室</label>
                            <input type="text" class="form-control" id="courseclassroom" name="courseclassroom" required>
                        </div>
                        <div class="form-group">
                            <label for="coursetime">课程时间</label>
                            <input type="text" class="form-control" id="coursetime" name="coursetime" required>
                        </div>

                        <button type="submit" class="btn btn-primary">提交</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 修改课程 -->
    <div class="modal fade" id="changeCourseModal" tabindex="-1" role="dialog" aria-labelledby="changeCourseModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="changeCourseModalLabel">修改课程</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <!-- 表单 -->
                    <form id="changeCourseForm">
                        <div class="form-group">
                            <label for="courseName1">课程名称</label>
                            <input type="text" class="form-control" id="courseName1" name="courseName1" required>
                        </div>
                        <div class="form-group">
                            <label for="coursemajor1">课程专业</label>
                            <input type="text" class="form-control" id="coursemajor1" name="coursemajor1" required>
                        </div>
                        <div class="form-group">
                            <label for="courseschool1">课程学院</label>
                            <input type="text" class="form-control" id="courseschool1" name="courseschool1" required>
                        </div>
                        <div class="form-group">
                            <label for="courseTeacher1">任课教师</label>
                            <input type="text" class="form-control" id="courseTeacher1" name="courseTeacher1" required>
                        </div>
                        <div class="form-group">
                            <label for="courseclassroom1">课程教室</label>
                            <input type="text" class="form-control" id="courseclassroom1" name="courseclassroom1" required>
                        </div>
                        <div class="form-group">
                            <label for="coursetime1">课程时间</label>
                            <input type="text" class="form-control" id="coursetime1" name="coursetime1" required>
                        </div>

                        <button type="submit" class="btn btn-primary">提交</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
        <!-- 通知信息 -->
        <div class="modal fade" id="messageModal" tabindex="-1" role="dialog" aria-labelledby="messageModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="messageModalLabel">通知信息</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div id="messagelist">
    
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- 提示信息 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">提示消息</h5>
                </div>
                <div class="modal-body">
                    <b id="message">这是提示信息</b>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <script>//显示提示信息
        function showmessage(message) {
            $('#message').text(message)
            $('#exampleModal').modal('show');
        }
    </script>
    <script>
        $(function () {
            secretaryshowcourse();
            $("#message-img").click(function(){
                data={
                    receive_identity : "secretary",
                    receive_id : allCookies['secretary_id']
                };
                $.ajax({
                    url: "showmessage",
                    type:"POST",
                    data: data,
                    dataType:"text",
                    success:function(data){//返回值为发送人是谁,消息内容
                        var html="";
                        var arr=data.split(";");
                        for(let i = 0; i < arr.length-1; i+=2){
                            html+=  "<div class='message'>"+
                                        "<b>"+arr[i]+"</b>"+
                                        "<p>"+arr[i+1]+"</p>"+
                                    "</div>"+
                                    "<hr>";
                        }
                        if (arr == ""){
                            html+="<p>暂无消息</p>"
                        }
                        $("#messagelist").html(html);
                        $("#messageModal").modal('show'); 
                    },
                    error: function(jqXHR, textStatus, errorThrown){
                        showmessage("获取通知失败");
                        console.log(textStatus + ': ' + errorThrown);
                    }
                }); 
            });
        });
        var allCookies = parseCookies();
        var current_page = 1;//当前页数
        var total_page;//总页数
        var recordsperpage = 5;//每页的记录数
        function secretaryshowcourse() {
            data = {
                current_page1: current_page,
                recordsperpage1: recordsperpage,
                secretary_id: allCookies['secretary_id']
            };
            if ($("#search").val() != "") {
                data.search = $("#search").val();
            }
            // showmessage(data.search);
            // return;
            $.ajax({
                url: "secretaryshowcourse",
                type: "POST",
                data: data,
                dataType: "text",
                success: function (data) {//返回7个值,课程名称，专业，学院，老师，教室，时间，课程id
                    var html = "";
                    var arr = data.split(";");
                    total_page = Math.floor((arr[0] - 1) / recordsperpage) + 1;
                    console.log(arr);
                    for (var i = 1; i < arr.length - 1; i += 7) {
                        html += "<tr>" +
                                    "<td>" + arr[i] + "</td>" +
                                    "<td>" + arr[i + 1] + "</td>" +
                                    "<td>" + arr[i + 2] + "</td>" +
                                    "<td>" + arr[i + 3] + "</td>" +
                                    "<td>" + arr[i + 4] + "</td>" +
                                    "<td>" + arr[i + 5] + "</td>" +
                                    "<td>" +
                                        "<button class='btn btn-primary' style='margin-right : 10px;' onclick='change("+arr[i+6]+", this)'>修改</button>"+
                                        "<button class='btn btn-danger' onclick='deletecourse("+arr[i+6]+")'>删除</button>"+
                                    "</td>"+

                                "</tr>";
                    }
                    $("#course").html(html);
                    var currentPageElement = document.getElementById("current_page");
                    currentPageElement.textContent = current_page;
                    var currentPageElement = document.getElementById("total_page");
                    currentPageElement.textContent = "/" + total_page;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    showmessage("获取课程失败");
                    console.log(textStatus + ': ' + errorThrown);
                }
            });
        }

        function prepage() {
            if (current_page > 1) {
                current_page -= 1
                secretaryshowcourse();
            }
        }

        function nextpage() {
            if (current_page + 1 <= total_page) {
                current_page += 1;
                secretaryshowcourse();
            }
        }

        function search() {
            current_page = 1;
            secretaryshowcourse();
        }

        function parseCookies() {
            var cookies = {};
            var cookieString = document.cookie;
            var cookieArray = cookieString.split('; ');

            for (var i = 0; i < cookieArray.length; i++) {
                var cookie = cookieArray[i].split('=');
                var name = cookie[0];
                var value = cookie[1];
                cookies[name] = value;
            }

            return cookies;
        }
    </script>
    <script>
        $(document).ready(function () {
            // 添加课程
            $("#addCourseForm").submit(function (event) {
                // 阻止默认的表单提交行为
                event.preventDefault();

                // 获取表单数据
                var data = {
                    courseName: $("#courseName").val(),
                    coursemajor: $("#coursemajor").val(),
                    courseschool: $("#courseschool").val(),
                    courseTeacher: $("#courseTeacher").val(),
                    courseclassroom: $("#courseclassroom").val(),
                    coursetime: $("#coursetime").val()
                };
                // 获取其他课程信息的输入框数据

                // 在这里可以通过 AJAX 将数据发送到后端进行插入数据库的操作
                $.ajax({
                    url: "secretaryluru",
                    type: "POST",
                    data: data,
                    dataType: "text",
                    success: function (data) {//返回是否修改成功
                        if (data == "true")
                            showmessage("录入成功")
                        secretaryshowcourse();
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        showmessage("录入课程失败");
                        console.log(textStatus + ': ' + errorThrown);
                    }
                });

                // 关闭模态框
                $("#addCourseModal").modal("hide");
            });
        });
    </script>
    <script>
        $(document).ready(function () {
        
            // 修改课程
            $("#changeCourseForm").submit(function (event) {
                // 阻止默认的表单提交行为
                event.preventDefault();

                // 获取表单数据
                var data = {
                    courseName: $("#courseName1").val(),
                    coursemajor: $("#coursemajor1").val(),
                    courseschool: $("#courseschool1").val(),
                    courseTeacher: $("#courseTeacher1").val(),
                    courseclassroom: $("#courseclassroom1").val(),
                    coursetime: $("#coursetime1").val(),
                    courseid : course_id
                };
                // 获取其他课程信息的输入框数据

                // 在这里可以通过 AJAX 将数据发送到后端进行插入数据库的操作
                $.ajax({
                    url: "secretarychange",
                    type: "POST",
                    data: data,
                    dataType: "text",
                    success: function (data) {//返回是否修改成功
                        if (data == "true")
                            showmessage("修改成功")
                        secretaryshowcourse();
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        showmessage("修改课程失败");
                        console.log(textStatus + ': ' + errorThrown);
                    }
                });

                // 关闭模态框
                $("#changeCourseModal").modal("hide");
            });
        });
        var course_id;
        //修改课程
        function change(n, button){
            course_id = n;
            // console.log(course_id);
            // console.log("1111");
            var row = button.closest("tr");
            $("#courseName1").val(row.cells[0].textContent);
            $("#coursemajor1").val(row.cells[1].textContent);
            $("#courseschool1").val(row.cells[2].textContent);
            $("#courseTeacher1").val(row.cells[3].textContent);
            $("#courseclassroom1").val(row.cells[4].textContent);
            $("#coursetime1").val(row.cells[5].textContent);
            $('#changeCourseModal').modal('show');
        }
        //删除课程
        function deletecourse(n){
                data = {
                    course_id : n
                };
                console.log(data.course_id);
                $.ajax({
                url: "secretarydeletecourse",
                type: "POST",
                data: data,
                dataType: "text",
                success: function (data) {//返回是否修改成功
                    if (data == "true")
                        showmessage("删除成功")
                    secretaryshowcourse();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    showmessage("删除课程失败");
                    console.log(textStatus + ': ' + errorThrown);
                }
            });
        }
    </script>
</body>

</html>